<template>
    <el-container>
        <el-header  style="border-bottom: 1px solid #00000018;
        height:50px;background-color: #41B883;">
            <el-row :span="25" style="margin: 8px 10px;">
                <el-col :span="1">
                    <a style="font-size: 30px;">
                        <i class="el-icon-arrow-left" @click="goTo()" style="color:white;"></i>
                    </a>
                </el-col>
                <el-col :span="10" :offset="7">
                    <div style="color:white;">个人主页</div>
                </el-col>
                <el-col :span="1" :offset="4">
                    <a style="font-size: 30px;">
                        <i class="el-icon-more" style="color:white;"></i>
                    </a>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <div class="backg">
                <div class="photo_bg" style="Opacity:0.5;height:250px">
                    <el-image style="height:250px; width:100%;" 
                    :src="require('@/assets/bg/bg2.jpg')" fit="cover"></el-image>
                </div>
                <div class="pict">
                    <div class="photo">
                        <el-image style="height=125px; width:125px;border: 2px solid white;"
                        :src="require('@/assets/pho/pic1.png')" fit="cover"></el-image>
                    </div>
                    <div class="icon1">
                        <i class="el-icon-picture-outline-round" style="color:white;"></i>
                    </div>
                </div>
            </div>
            <div class="pimf">
                <el-row :gutter="20" style="color:gray;">
                    <el-col :span="12" :offset="7" style="text-align:center;
                    font-size:18px;">未设置呢称
                    <i class="el-icon-edit" style="color:#409EFF;"></i>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="17" :offset="4" style="text-align:center;
                    font-size:16px;color:#409EFF">介绍一下你自己
                    </el-col>
                </el-row>
                <el-row :gutter="30" style="margin-top:15px;">
                    <el-col :span="7" :offset="1" 
                    style="font-size:16px;color:gray;">支付宝账户
                    </el-col>
                    <el-col :span="10"  
                    style="font-size:16px;">{{num}}
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="7" :offset="1" 
                    style="font-size:16px;color:gray;">真实姓名
                    </el-col>
                    <el-col :span="10"  
                    style="font-size:16px;">{{realn}}
                    <i class="el-icon-circle-check" style="color:red"></i>
                    <span style="color:red;font-size:12px;">
                        已实名
                    </span>
                    </el-col>
                </el-row>
                <el-divider><span style="color:#409EFF;font-size:15px;">
                    查看更多</span></el-divider>
            </div>
            <div class="rec">
                <el-row :gutter="20">
                    <el-col :span="3" :offset="1" style="color:gray;font-size:15px;">
                        <el-image style="height:45px; width:45px" 
                        :src="require('@/assets/pho/pic1.png')" fit="fit"></el-image>
                        <!-- <span style="color:gray;font-size:15px;"></span> -->
                    </el-col>
                    <el-col :span="8" style="color:gray;font-size:18px;margin-top:12px;">
                        记录的我生活</el-col>
                    <el-col :span="2" :offset="8" style="margin-top:12px;">
                        <i class="el-icon-camera"></i>
                    </el-col>
                </el-row>
            </div>
            <div class="imcard">
                <el-card class="box-card">
                    <div class="card">
                        <el-row :gutter="20" style="margin-bottom:10px;">
                            <el-col :span="3" style="color:gray;font-size:15px;">
                                <el-image style="height:45px; width:45px" 
                                :src="require('@/assets/pho/pic1.png')" fit="fit"></el-image>
                            </el-col>
                            <el-col :span="8" :offset="1" style="color:gray;font-size:16px;">
                                <el-row>{{realn}}</el-row>
                                <el-row>刚刚</el-row>
                            </el-col>
                            <el-col :span="2" :offset="9" style="margin-top:12px;color:gray;">
                                <i class="el-icon-more"></i>
                            </el-col>
                        </el-row>
                        <el-image :src="require('@/assets/pho/pic2.jpg')"></el-image>
                        <el-row style="text-align:center;margin-top:10px;font-size:18px;">
                            <el-col :span="8">
                                <i class="el-icon-s-opportunity"></i>点赞
                            </el-col>
                            <el-col :span="8">
                                <i class="el-icon-s-comment"></i>评论
                            </el-col>
                            <el-col :span="8">
                                <i class="el-icon-s-promotion"></i>分享
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
                <el-card>
                    <div class="card">
                        <el-row :gutter="20" style="margin-bottom:10px;">
                            <el-col :span="3" style="color:gray;font-size:15px;">
                                <el-image style="height:45px; width:45px" 
                                :src="require('@/assets/pho/pic1.png')" fit="fit"></el-image>
                            </el-col>
                            <el-col :span="8" :offset="1" style="color:gray;font-size:16px;">
                                <el-row>{{realn}}</el-row>
                                <el-row>刚刚</el-row>
                            </el-col>
                            <el-col :span="2" :offset="9" style="margin-top:12px;color:gray;">
                                <i class="el-icon-more"></i>
                            </el-col>
                        </el-row>
                        <el-image :src="require('@/assets/pho/pic3.jpg')"></el-image>
                        <el-row style="text-align:center;margin-top:10px;font-size:18px;">
                            <el-col :span="8">
                                <i class="el-icon-s-opportunity"></i>点赞
                            </el-col>
                            <el-col :span="8">
                                <i class="el-icon-s-comment"></i>评论
                            </el-col>
                            <el-col :span="8">
                                <i class="el-icon-s-promotion"></i>分享
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </div>
            <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
        </el-main>
    </el-container>
</template>

<script>

export default({
    name:"Imf",
    methods:{
        goTo(){
            this.$router.push({path:'/persons'})
        },
        handleChange(val) {
        console.log(val);
      }
    },
    data() {
        return{
            /*url:'../assets/img/bg1.jpg',*/
            /*url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',*/
            /*photo:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',*/
            name: "patrick",
            num: "12345678910",
            realn: "派大夕",
            activeNames: ['1']

        }
    },
})
</script>

<style scoped>
    .el-container{
        height: 812px;
        display: flex;
        font-size: 25px;
        /*background-color: wheat;*/
    }

    .pimf .el-row{
        margin-bottom: 5px;
    }

    .el-header,.el-main{
        /*background-color: #64b587be;*/
        padding: 0;
    }

    .backg{
        height: 250px;
        width: 100%;
        /*background-color: turquoise;*/
    }

    .el-main{
        border-top: 1px solid #64b5873f;
        width: 100%;
        background-color: white;
    }

    .pict{
        margin-bottom: 0;
        margin-top: -95px;
        margin-left: 125px;
        width: 130px;
        height: 130px;
    }

    .photo{
        width: 125px;
        height: 125px;
        background-color: white;
    }

    .icon1{
        border:2px solid #409EFF;
        border-radius:20px;
        width: 25px;
        height: 25px;
        background-color:#409EFF;
        margin-left: 130px;
        margin-top: -25px;
    }

    .pimf{
        width: 100%;
        height: 150px;
        /*background-color: rgb(247, 225, 247);*/
        margin-top: 45px;
    }

    .rec{
        width: 100%;
        height: 55px;
        /*background-color: yellowgreen;*/
        margin: 5px 0 20px 0;
        padding-top: 5px;
        background-color: #64b58711;
    }
</style>